<template>
    <div>
        <h2>房型添加</h2>
        <table class="table  table-bordered">
            <tbody>
                <tr>
                    <td>房型名称</td>
                    <td>
                        <input type="text" v-model="type.HouseTypeName">
                    </td>
                </tr>


                <tr>
                    <td>价格</td>
                    <td>
                        <input type="text" v-model="type.Price">
                    </td>
                </tr>


                <tr>
                    <td>面积</td>
                    <td>
                        <input type="text" v-model="type.Num">
                    </td>
                </tr>


                <tr>
                    <td>房型介绍</td>
                    <td>
                        <textarea cols="50" rows="5" v-model="type.JieShao"> </textarea>
                    </td>
                </tr>


                <tr>
                    <td>图片</td>
                    <td>
                        <input type="file" @change="changeImg">
                        <img :src="type.Photo" width="60" height="60">
                    </td>
                </tr>


                <tr>
                    <td></td>
                    <td>
                        <input type="button" class="btn btn-success" value="添加" @click="ok">
                    </td>
                </tr>

            </tbody>


        </table>

    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
const route = useRoute();
const router = useRouter();


//添加房型
let type = reactive({

    "HouseTypeName": '',
    "Price": '',
    "Num": '',
    "JieShao": '',
    "Photo": '',
})





//上传图片
const changeImg = (e: any) => {


    var obj = e.target.files[0];
    var f = new FormData();
    f.append("file", obj);


    axios({

        url: 'https://localhost:7259/api/HouseType/UpFile',
        method: 'post',
        data: f,
    })

        .then((res) => {
            console.log(res);
            type.Photo = res.data;

        })


        .catch((ree) => {
            console.log(ree);
        })

}


//添加房型
const ok = () => {


if(type.HouseTypeName==""){
    alert("房型名称不能为空");
    return;
}



if(type.Price==""){
    alert("价格不能为空");
    return;
}


if(type.Num==""){
    alert("面积不能为空");
    return;
}


if(type.JieShao==""){
    alert("介绍不能为空");
    return;
}


if(type.Photo==""){
    alert("图片不能为空");
    return;
}





    axios({

        url: 'https://localhost:7259/api/HouseType/HouseTypeAdd',
        method: 'post',
        data: type,
    })

        .then((res) => {
            console.log(res);
            if (res.data == -1) {
                alert("房型已经存在");
                return;
            }
            else if (res.data == 1) {
                alert("添加成功");
               router.push('/HouseTypeList')
            }
            else {
                alert("添加失败");
                return;
            }
        })


        .catch((ree) => {
            console.log(ree);
        })



}
</script>

<style scoped></style>